<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {ref} from "vue";


const option = ref({
  legend: {
    textStyle: {
      color: 'white'
    }
  },
  xAxis: {
    show: false,
    type: 'category',
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '产品A',
      type: 'scatter',
      symbolSize: 30,
      itemStyle: {
      },
      data: [[1, 320000]]
    },
    {
      name: '产品B',
      type: 'scatter',
      symbolSize: 30,
      itemStyle: {
      },
      data: [[2, 400000]]
    },
    {
      name: '产品C',
      type: 'scatter',
      symbolSize: 30,
      itemStyle: {
      },
      data: [[3, 550000]]
    },

  ]
});

</script>

<template>
  <common-box>
    <div class="chart-header">
      分产品采购金额
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: center;
  font-size: 1.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>